<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="原因" unmount-on-close :mask-closable="false">
    <a-space>
      <span>{{ checkDetail.postName }} | {{ checkDetail.staffName }}</span>
      <tag type="warn">驳回</tag>
    </a-space>
    <a-descriptions layout="inline-horizontal" style="margin-top: 10px">
      <a-descriptions-item label="驳回原因">
        {{ checkDetail.reason }}
      </a-descriptions-item>
    </a-descriptions>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button v-if="showAgainApply" type="primary" @click="againApply(form)">重新申请</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()
  const visible = ref(false)

  const checkDetail = ref({})
  // 是否显示重新申请按钮
  const showAgainApply = ref(false)
  const form = ref({})
  // 打开弹窗 fromPage：list、bill
  const open = (record, fromPage = 'list') => {
    showAgainApply.value = fromPage == 'list' && record.ifAgain == 1
    visible.value = true
    form.value = record
    checkDetail.value = record.checkFlowList.find((i) => i.status == 6)
  }

  const onCancel = () => {
    visible.value = false
  }

  const againApply = () => {
    const record = form.value
    visible.value = false
    if (record.costType == 1) {
      navigateTo(`/operate-cost/again-apply/${record.id}?type=againType`, record.code + '-重新申请')
    } else {
      navigateTo(`/operate-cost/again-pay/${record.id}?type=againType`, record.code + '-重新申请')
    }
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
  }
  .form {
    max-height: 60vh !important;
    overflow: auto;
    .form-item {
      display: flex;
      span {
        width: 50px;
        color: #4e5969;
      }
      :deep(.arco-textarea-wrapper) {
        background-color: #ffffff;
        img {
          width: 640px;
          object-fit: contain;
          object-position: left;
        }
      }
    }
  }
</style>
